{% extends "base.html" %}
{% block title %}Chat{% endblock %}
{% block script %}
<script type="text/javascript" src="/_ah/channel/jsapi"></script>
<script type="text/javascript">
    $(document).ready(function(){
        var chat_token  = '{{chat_token}}';
        var channel     = new goog.appengine.Channel(chat_token);
        var socket      = channel.open();
        var not_read_cnt = 0;
        var sound_flag = 1;
        var focus_flag = -1;
        
        socket.onopen   = function(){
        };
        socket.onmessage= function(m){
            var data = $.parseJSON(m.data);
            if(data["msg"] =="join"){
                if($("#"+data['nick']).length == 0){
                    $('#id_userlist').append("<li id='"+data['nick']+"'>"+data['nick']+"</li>");
                    $("#id_chatcontents").append("<strong>"+data['nick']+"</strong> is joined.<br/>");
                }
                $("#id_chatcontents").show();
                $("#id_connect").remove();
                $("#id_chat").scrollTop($("#id_chat")[0].scrollHeight);
            }
            else if(data['msg'] =='exit'){
                $("#id_"+data['nick']).remove();
                if($("#id_"+data['nick']).length == 0){
                       $('#id_chatcontents').append("<strong>"+data['nick']+"</strong> is out.<br/>");
                       $("#id_chat").scrollTop($("#id_chat")[0].scrollHeight);
                }
            }
            else{
                var start_idx = data['msg'].indexOf("http");
                var http_flag = 1;
                if(start_idx < 0 ){
                    start_idx = data['msg'].indexOf("www");
                    http_flag = -1;                     
                }
                if(start_idx > -1){
                    var end_idx = data['msg'].indexOf(" ", start_idx);
                    if(end_idx < 0)
                       end_idx = data['msg'].length;
                    var link = data['msg'].substring(start_idx, end_idx);
                    if(http_flag < 0)
                       data['msg'] = data['msg'].replace(link, "<a href='http://"+link+"' target='_blank'>"+link+"</a>");
                    else
                       data['msg'] = data['msg'].replace(link, "<a href='"+link+"' target='_blank'>"+link+"</a>");
                }
                $("#id_chatcontents").append("<strong>"+data['nick']+"</strong>: "+data['msg']+"<br/>");
                $("#id_chat").scrollTop($("#id_chat")[0].scrollHeight);
                
                if(focus_flag > 0){
                   not_read_cnt++;
                   document.title = "TunaCrew ("+String(not_read_cnt)+")";
                }
            }
        };
        socket.onerror  = function(err){
            //alert("JS Error:" + err['description']);
        };
        socket.onclose  = function(){
            
        };
        if($("#id_{{user.user_nickname}}").length != 0){
            $("#id_connect").remove();
            $("#id_chatcontents").show();
        }
        $("#id_chat").scrollTop($("#id_chat")[0].scrollHeight);
        
        $(window).focus(function(){
           document.title = "TunaCrew";
           not_read_cnt = 0;
           focus_flag = -1;
        });
        $(window).blur(function(){
           focus_flag = 1;
        });
    });
</script>
{% endblock %}
{% block userinfo %}
	<p id="user-info">
	    <strong>{{ user.user_nickname }}</strong>, Welcome to Tuna Crew<br/>
	    <a href="/change_pwd/">Change Password</a><br/>
	    <a href="/logout/">Logout</a>
	</p>
{% endblock %}
{% block menu_chat %}id="current"{% endblock %}
{% block content %}
	<div id="main">
	    <h3>Chatting</h3>
	    <div id="id_chat" class="chatarea">
	        <strong id="id_connect">{{ user.user_nickname }} is connecting to server...</strong>
	    <div id="id_chatcontents" class="chat_contents">
	     {% if chat_list %}
	     {% for chat in chat_list %}
	     <strong>{{ chat.user_nickname }}</strong>: {{ chat.msg }}<br/>
	     {% endfor %}
	     {% endif %}
	    <!-- chatarea ends -->
	</div>
	</div>
	<form id="id_chatform">
	    <input type="text" name="msg" class="chat" id="id_msg" placeholder="Type a message"/>
	    <input class="button" type="submit" value="OK" onClick="ajaxChatPost(); return false;" />
	</form>
	<!-- main ends -->  
	   </div>
	<div id="sidebar">
	     <h3>Connected user</h3>
	     <ul class="sidemenu" id="id_userlist">
	     {% for user in user_list %}               
           <li id="{{ user.user_nickname }}">{{ user.user_nickname }}</li>
	     {% endfor %}
	     </ul>      
	   <!-- sidebar ends -->       
	</div>
{% endblock %}